<template>
  <table-header
          placeholder="请输入语言名称"
          :queryList="queryList"
          @pagination="getDataList"
          :rightColSpan="8"
          :leftColSpan="16"
  >
    <template #operation>
      <el-button type="primary" size="mini" @click="handleCreateLanguage">
        <el-icon>
          <plus />
        </el-icon>
        新建语言
      </el-button>
    </template>
  </table-header>
  <table-data :tableData="tableData" :isloading="isloading">
    <template #main>
      <el-table-column label="名称" prop="name" />
      <el-table-column label="排序" prop="sort" />
      <el-table-column label="创建时间">
        <template #default="{row}">
          {{row.ctime.replace('T', ' ').replace('Z', '')}}
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template #default="{row}">
          {{row.mtime.replace('T', ' ').replace('Z', '')}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{row}">
          <el-button type="text" size="mini" v-if="row.inuse == 1">上线</el-button>
          <el-button type="text" size="mini" v-else style="color: red">下线</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" size="mini" @click="handleUpdateLanguage(row)" :disabled="row.isdefault == 1" :title="row.isdefault == 1 ? '系统标签不可操作' : ''">编辑</el-button>
          <el-button type="text" size="mini" :style="{color: row.isdefault == 1 ? '' : 'red'}" @click="handleDeleteLanguage(row)" :disabled="row.isdefault == 1" :title="row.isdefault == 1 ? '系统标签不可操作' : ''">删除</el-button>
        </template>
      </el-table-column>
    </template>
  </table-data>
  <el-row class="mt10">
    <el-col :span="24">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
  <create-language
          ref="dialogFormRef"
          :dialog-status="dialogStatus"
          :dialog-visible="dialogVisible"
          :dialog-form-data="dialogFormData"
          @handleCancelDialog="handleCancelDialog"
          @reloadData="getDataList"
  />
</template>

<script>
  import {reactive, ref, nextTick} from 'vue'
  import TableHeader from "@/views/public/TableHeader";
  import TableData from "@/views/public/TableData";
  import TablePagination from "@/views/public/TablePagination";
  import {Plus} from "@element-plus/icons"
  import {getLanguages, deleteLanguage} from "@/api/media/constant";
  import {ElMessageBox, ElMessage} from 'element-plus'
  import CreateLanguage from "./components/CreateLanguage";

  export default {
    name: "index",
    components: {TableHeader, TableData, TablePagination, Plus, CreateLanguage},
    setup() {
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        keyword: undefined
      })
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const isloading = ref(false)
      const dialogVisible = ref(false)
      const dialogStatus = ref('create')
      const dialogFormData = reactive({
        id: undefined,
        name: '',
        sort: 1
      })
      const dialogFormRef = ref(null)

      /** 获取语言列表 **/
      const getDataList = () => {
        isloading.value = true
        getLanguages(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
        })
      }
      /** 开启新建语言弹框 **/
      const handleCreateLanguage = () => {
        resetFormData()
        dialogStatus.value = 'create'
        dialogVisible.value = true
        nextTick(() => {
          dialogFormRef.value.dialogFormDataRef.clearValidate()
        })
      }
      /** 开启编辑语言弹框 **/
      const handleUpdateLanguage = (row) => {
        dialogFormData.id = row.id
        dialogFormData.name = row.name
        dialogFormData.sort = row.sort
        dialogStatus.value = 'update'
        dialogVisible.value = true
        nextTick(() => {
          dialogFormRef.value.dialogFormDataRef.clearValidate()
        })
      }
      /** 重置语言form表单 **/
      const resetFormData = () => {
        dialogFormData.id = undefined
        dialogFormData.name = ''
        dialogFormData.sort = 1
      }
      /** 关闭弹框 **/
      const handleCancelDialog = () => {
        dialogVisible.value = false
      }
      /** 删除语言 **/
      const handleDeleteLanguage = (row) => {
        ElMessageBox.confirm('确定要删除语言 ' + row.name + ' 吗？', '删除语言', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteLanguage({id: row.id}).then(response => {
            ElMessage({type: 'success', message: response.msg, duration: 2000})
            getDataList()
          })
        }).catch(() => {})
      }

      const init = () => {
        getDataList()
      }
      init()

      return {
        queryList,
        tableData,
        isloading,
        getDataList,
        handleCreateLanguage,
        handleUpdateLanguage,
        handleDeleteLanguage,
        dialogVisible,
        dialogStatus,
        dialogFormData,
        handleCancelDialog,
        dialogFormRef
      }
    }
  }
</script>

<style scoped>

</style>
